<template></template>

<script lang="ts">
import ElCollapseTransition from "@/components/collapse-transition";
import ElIcon from "@/components/icon";
import { ArrowRight } from "@element-plus/icons-vue";
import { inject, PropType, defineComponent, ref, computed } from "vue";
import { generateId } from "@/utils/util";
import { CollapseProvider } from "@/collapse/src/collapse.type";
export default defineComponent({
  name: "ElCollapseItem",
  components: { ElCollapseTransition, ElIcon, ArrowRight },
  props: {
    title: {
      type: String,
      default: "",
    },
    name: {
      type: [String, Number] as PropType<string | number>,
      default: () => {
        return generateId();
      },
    },
    disabled: Boolean,
  },
  setup(props) {
    const collapse = inject<CollapseProvider>("collapse");

    const contentWrapStyle = ref({
      height: "auto",
      display: "block",
    });

    const contentHeight = ref(0);
    const focusing = ref(false);
    const isClick = ref(false);
    const id = ref(generateId());

    const isActive = computed(() => {
      return collapse?.activeNames.value.indexOf(props.name) > -1;
    });

    const handleFocus = () => {
      setTimeout(() => {
        if (!isClick.value) {
          focusing.value = true;
        } else {
          isClick.value = false;
        }
      }, 50);
    };

    const handleHeaderClick = () => {
      if (props.disabled) return;
      collapse?.handleItemClick(props.name);
      focusing.value = false;
      isClick.value = true;
    };

    const handleEnterClick = () => {
      collapse?.handleItemClick(props.name);
    };
    return {
      isActive,
      contentWrapStyle,
      contentHeight,
      focusing,
      isClick,
      id,
      handleFocus,
      handleHeaderClick,
      handleEnterClick,
      collapse,
    };
  },
});
</script>
